* {
    touch-action: pan-y;
}
.main-order-app {
    width: 100%;
    height: 92vh;
    background-color: rgb(243, 241, 242);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: scroll;
    .main-order-header {
        height: 1.375609756097561rem;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: rgb(255, 255, 255);
        .main-order-header-con {
            position: absolute;
            left: 0.24390243902439024rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .main-order-header-con-span-one {
                font-size: 0.36585365853658536rem;
                font-weight: 800;
           }
            .main-order-header-con-span-two {
                font-size: 0.36585365853658536rem;
                font-weight: 800;
                margin-left: 0.1951219512195122rem;
           }
       }
        h4 {
            font-size: 0.3902439024390244rem;
            font-weight: bold;
       }
   }
    .main-order-con {
        margin-top: 0.4878048780487805rem;
        height: 14.658536585365853rem;
        border-radius: 0.24390243902439024rem;
        width: 90%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        background-color: rgb(255, 255, 255);
        padding: 0.36585365853658536rem;
        padding-right: 0.4878048780487805rem;
        overflow: scroll;
        .main-order-top {
            h4 {
                font-size: 0.36585365853658536rem;
           }
            .main-order-id {
                display: flex;
                flex-direction: row;
                line-height: 1.4634146341463414rem;
                justify-content: start;
                align-items: center;
                border-bottom: 0.024390243902439025rem solid #ccc;
                position: relative;
                width: 100%;
                height: 1.0975609756097562rem;
                background-color: #fff;
                border-radius: 0.4878048780487805rem 0.4878048780487805rem 0.4878048780487805rem 0.4878048780487805rem;
                overflow: hidden;
                input {
                    width: 60%;
                    margin-left: 0.24390243902439024rem;
                    border-radius: 0.34146341463414637rem;
                    height: 0.7073170731707317rem;
                    color: rgb(49, 49, 49);
                    text-indent: 1em;
                    border: 0.024390243902439025rem solid #ccc;
               }
                img {
                    width: 0.4878048780487805rem;
                    height: 0.4878048780487805rem;
               }
           }
            .main-order-img-and-video {
                margin-top: 0.1878048780487805rem;
                display: flex;
                flex-direction: row;
                margin-bottom: 0.3902439024390244rem;
                justify-content: center;
                flex-wrap: wrap;
                .main-order-img {
                    width: 4.1951219512195124rem;
                    height: 2.1951219512195124rem;
                    border-radius: 0.24390243902439024rem;
                    border: 0.024390243902439025rem dashed #ccc;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
               }
                .main-order-video {
                    margin-left: 0.4878048780487805rem;
                    width: 2.1951219512195124rem;
                    height: 2.1951219512195124rem;
                    border-radius: 0.24390243902439024rem;
                    border: 0.024390243902439025rem dashed #ccc;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 0.975609756097561rem;
                        height: 0.975609756097561rem;
                   }
                    h4{
                        line-height: 0.4878048780487805rem;
                        font-size: 0.2926829268292683rem;
                   }
               }
                .am-image-picker-item .am-image-picker-upload-btn{
                    width: 100%;
                    height: 100%;
               }
           }
            .main-order-imgs{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-bottom: 0.24390243902439024rem;
           }
            .main-order-video-list{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
           }
            p {
                padding-bottom: 0.4878048780487805rem;
                color: #000;
                border-bottom: 0.024390243902439025rem solid #ccc;
                span {
                    color: red;
                    font-weight: bold;
               }
           }
            .main-order-activity-rules {
                display: flex;
                flex-direction: row;
                margin-top: 0.36585365853658536rem;
                h2 {
                    font-size: 0.34146341463414637rem;
                    color: rgb(94, 94, 94);
                    line-height: 0.6097560975609756rem;
               }
                .main-order-activity-right {
                    margin-left: 0.24390243902439024rem;
                    h4 {
                        font-size: 0.34146341463414637rem;
                        color: rgb(94, 94, 94);
                        line-height: 0.6097560975609756rem;
                        font-weight: normal;
                   }
               }
           }
       }
        .footerInputCon{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .footerInput {
                width: 70%;
                height: 0.8536585365853658rem;
                border-radius: 0.4878048780487805rem;
                border: none;
                background-color: rgb(26, 147, 202);
                color: rgb(219, 232, 244);
                font-weight:bold;
                font-size: 0.3902439024390244rem;
                margin-top: 0.8rem;
           }
       }
   }
    .main-order-information-message{
        color: red;
        margin-top: 0.0975609756097561rem;
        font-size: 0.3902439024390244rem;
        padding-left: 0.36585365853658536rem;
        padding-right: 0.24390243902439024rem;
        line-height: 0.6097560975609756rem;
        text-indent: 1em;
   }
    .navigator-good-clear-order{
        width: 7.317073170731708rem;
        height: 1.951219512195122rem;
        position: absolute;
        left: -1.048780487804878rem;
   }
    .navigator-good-clear-ok-order{
        position: absolute !important;
        left: 0rem;
        top: 2.4390243902439024rem;
   }
    .naviagtor-good-clear-order-order{
        position: absolute !important;
        left: -1.2195121951219512rem;
        top: 0.341463414634146rem;
   }
    .naviagtor-guide-page-message-order{
        position: absolute;
        width: 5.780487804878049rem;
        height: 2.682926829268293rem;
        bottom: 6.097560975609756rem;
        color: #fff;
        left: 1.5365853658536586rem;
        line-height: 0.43902439024390244rem;
        border: 0.024390243902439025rem solid #fff;
        border-radius: 0.4878048780487805rem;
        text-indent: 2em;
        padding: 0.4878048780487805rem;
   }
    .naviagtor-guide-page-good-message-order{
        position: absolute;
        width: 6.878048780487805rem;
        height: 3.1219512195121952rem;
        color: #fff;
        left: 0rem;
        line-height: 0.5121951219512195rem;
        border: 0.024390243902439025rem solid #fff;
        border-radius: 0.4878048780487805rem;
        text-indent: 2em;
        padding: 0.4878048780487805rem;
        font-size: 0.34146341463414637rem;
        font-weight: 800;
   }
    .main-navigator-app-tabbar-bottom-background-order{
        position: absolute;
        width: 2.4390243902439024rem;
        height: 2.4390243902439024rem;
        background: #fff;
   }
    .navigator-guide-page-order{
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        background-color: rgba(0,0,0,0.7);
        z-index: 21;
        .navigator-guide-page-img-order{
            img{
                width: 1.3658536585365855rem;
                height: 1.2926829268292683rem;
                transform: rotateZ(57deg);
                position: relative;
                bottom: -15.029268rem;
                left: 0.536585rem;
           }
       }
        .naviagtor-guide-page-right-order{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 4.878048780487805rem;
            height: 4.878048780487805rem;
            position: absolute;
            bottom: -3.368292682926829rem;
            left: 0.536585rem;
            h4{
                color: skyblue;
                font-size: 0.24390243902439024rem;
                text-decoration: underline;
                line-height: 0.24390243902439024rem;
           }
            h3{
                color: #fff;
                font-size: 0.4878048780487805rem;
                line-height: -0.17073170731707318rem;
                height: 1.024390243902439rem;
                display: inline-block;
                border: 0.024390243902439025rem solid #fff;
                border-radius: 0.6341463414634146rem;
                width: 3.97561rem;
                text-align: center;
                position: absolute;
                right: -1.414634rem;
                bottom: 4.560975609756097rem;
                padding-top: 0.17073170731707318rem;
           }
       }
        .navigator-guide-page-order-input-order{
            img{
                width: 1.3658536585365855rem;
                height: 1.2926829268292683rem;
                transform: rotateZ(-20deg);
                position: relative;
                left: -2.690244rem;
                top: -0.9rem;
           }
       }
        .navigator-guide-page-order-top-order{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 4.878048780487805rem;
            height: 4.878048780487805rem;
            position: absolute;
            left: 2.5365853658536586rem;
            top: 4.2926829268292686rem;
            h4{
                color: skyblue;
                font-size: 0.24390243902439024rem;
                text-decoration: underline;
                line-height: 0.24390243902439024rem;
           }
            h3{
                color: #fff;
                font-size: 0.4878048780487805rem;
                line-height: -0.17073170731707318rem;
                height: 1.024390243902439rem;
                display: inline-block;
                border: 0.024390243902439025rem solid #fff;
                border-radius: 0.6341463414634146rem;
                width: 3.97561rem;
                text-align: center;
                position: absolute;
                right: 1.585366rem;
                bottom: 4.560975609756097rem;
                padding-top: 0.17073170731707318rem;
                left: 4.219512rem;
                top: 3.3658536585365852rem;
           }
       }
   }
}
